<!--
 * @Author: @yzcheng
 * @Date: 2021-04-22 15:49:31
 * @Version: 1.0
 * @LastEditors: @yzcheng
 * @Description: 路线详情
 * @LastEditTime: 2021-04-29 10:46:53
-->
<template>
  <div class="flow_chart">
    <div class="flow_time_line">
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in activities"
          @click="changeChart(activity)"
          :key="index"
          :icon="activity.icon"
          :type="activity.type"
          :color="activity.color"
          :size="activity.size"
          :timestamp="activity.timestamp"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </div>
    <div class="flow_chart_data">
      <Chart ref="Chart" :change="changeChart" :info="Info" />
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Model, Options } from 'vue-property-decorator'
import Chart from '@/components/PublicProcess/Chart/flowChart.vue'
import { queryByBusId } from '@/api/line'
import {isEmpty} from 'lodash'
@Options({
  components: { Chart },
})
export default class lineDetails extends Vue {
  @Model('info', { type: Object }) Info: any
  color = { ADD: 'blue', UPDATE: '#0bbd87' }
  async beforeMount() {
    this.getByBus()
  }
  async getByBus(){
    await queryByBusId(this.Info.id).then((res) => {
      if (isEmpty(res.data.data)) {
        return
      }
      this.activities =  res.data.data.map((item) => {
        return Object.assign(item, {
          content: item.processInstanceName,
          timestamp: this['$moment'](item.updateDate).format('YYYY-MM-DD HH:mm:ss'),
          color: this.color[item.processType],
        })
      })
      this.changeChart(this.activities[0])
    })
  }
  async updated () {
    this.getByBus()
  }
  changeChart(item) {
    let el: any = this.$refs.Chart
    el.clear()
    this.Info.approvalNo = item?.processInstanceId
    el.getTableData()
  }
  activities = []
}
</script>
<style lang="scss">
.flow_chart {
  .el-timeline-item {
    cursor: pointer;
  }
  .el-timeline-item .el-timeline-item__content:hover {
    transition: all 0.5;
    color: rgba($color: #000000, $alpha: 0.5);
  }
}
</style>
<style scoped lang="scss">
.flow_chart {
  padding: 20px;
  height: calc(100% - 60px);
  overflow: auto;
  display: flex;
  & > .flow_time_line {
    width: 300px;
  }
  & > .flow_chart_data {
    flex: 1;
  }
}
</style>
